<template>
  <div class="information">
    <div class="in" style="height: 300px">
      <el-timeline>
        <el-timeline-item icon="el-icon-location">
          <el-descriptions title="发货方" :column="2">
            <el-descriptions-item label="发货方姓名"><span v-text="order.senderName"></span></el-descriptions-item>
            <el-descriptions-item label="发货方电话"><span v-text="order.senderPhone"></span></el-descriptions-item>
            <el-descriptions-item label="发货方地址"><span v-text="order.senderAddress"></span></el-descriptions-item>
          </el-descriptions>
        </el-timeline-item>
        <el-timeline-item icon="el-icon-aim">
          <el-descriptions title="收货方" :column="2">
            <el-descriptions-item label="收货方姓名"><span v-text="order.receiverName"></span></el-descriptions-item>
            <el-descriptions-item label="收货方电话"><span v-text="order.receiverPhone"></span></el-descriptions-item>
            <el-descriptions-item label="收货方地址"><span v-text="order.receiverAddress"></span></el-descriptions-item>
          </el-descriptions>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="in" style="padding: 1rem 0px">
      <svg t="1649406679770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="2288" width="25" height="25">
        <path
          d="M596.517463 238.392195h339.160456l-136.441756 253.398374 136.441756 245.597659H432.781528l155.939383-116.552846"
          fill="#FF9EB0" p-id="2289"></path>
        <path d="M159.893854 137.028683h432.727414v479.914667H159.893854z" fill="#FF9EB0" p-id="2291"></path>
        <path
          d="M204.317138 949.451967c0 21.437398-17.541203 38.982764-38.982764 38.982765h-15.597268c-21.441561 0-38.982764-17.545366-38.982765-38.982765V83.997138c0-21.441561 17.541203-38.982764 38.982765-38.982764h15.597268c21.441561 0 38.982764 17.541203 38.982764 38.982764v865.454829z"
          fill="#E6E6F5" p-id="2293"></path>
        <path d="M165.334374 64.503675h38.982764v904.437593h-38.982764z" fill="#6E6E96" opacity=".15"
              p-id="2294"></path>
        <path
          d="M188.724033 949.451967a19.518439 19.518439 0 0 1-19.493464 19.493464h-15.597268a19.518439 19.518439 0 0 1-19.493464-19.493464V83.997138a19.518439 19.518439 0 0 1 19.493464-19.493463h15.597268a19.518439 19.518439 0 0 1 19.493464 19.493463v865.454829z m38.986926-865.454829c0-32.243512-26.232715-58.476228-58.476227-58.476227h-15.597269c-32.243512 0-58.476228 26.232715-58.476227 58.476227v865.454829c0 32.243512 26.232715 58.476228 58.476227 58.476228h15.597269c32.243512 0 58.476228-26.232715 58.476227-58.476228V83.997138z"
          fill="#6E6E96" p-id="2295"></path>
        <path
          d="M655.239285 257.881496v460.017431h-163.819187l93.650211-80.325724v-382.043577zM227.710959 156.522146h50.679675v440.92774H227.710959z"
          fill="#963C3C" opacity=".15" p-id="2296"></path>
      </svg>
      <label style="font-size: 1rem">距离:<span v-text="order.distance"></span>km</label><label
      style="font-size: 1rem;margin-left: 4rem">地图：
      <el-button @click="dialogVisible = true" class="ditu">查看地图</el-button>
    </label>
    </div>
    <el-dialog title="地图查看" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="5" :scroll-wheel-zoom="true">
        <!-- 比例尺 -->
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <!-- 点 -->
        <bm-marker :position="receiverAddress" :dragging="true"></bm-marker>
        <bm-marker :position="senderAddress" :dragging="true"></bm-marker>
      </baidu-map>
    </el-dialog>
  </div>
</template>
<script>
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
import OrderAPI from '../../../../src/api/logisticsmanagement/ordermanagement/orderAPI'

// 注册所有的百度地图组件
Vue.use(BaiduMap, {
  ak: 'HQ7GzsIr9jkNWsFY6fMOsChIW3NSMnRk'
})

export default {
  data() {
    return {
      dialogVisible: false,
      // orderXQ:{
      //   receiverAddress:'',
      //   senderAddress:''
      // },
      receiverAddress: {lng: 116.404, lat: 39.915},
      senderAddress: {lng: 105.000, lat: 38.000}
    };
  },
  props: ['order'],
  methods: {
    handleClose(done) {
      done();
    },
    getAddress(order) {
      OrderAPI.getAddress(order.receiverAddress).then(({data}) => {
        this.receiverAddress = data.data
      })
      OrderAPI.getAddress(order.senderAddress).then(({data}) => {
        this.senderAddress = data.data
      })
    }
  },
  watch: {
    order: function (order) {
      this.getAddress(order)
    }
  }
};
</script>
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>
